<template>
  <div>
    <h2>库存统计</h2>
    <div class="chart" id="myechartsthree">图表容器3</div>
  </div>
</template>

<script>
import { inject, onMounted, reactive } from "vue";
export default {
  setup() {
    let $echarts = inject("echarts");
    let $http = inject("axios");

    let data = reactive({})

    async function getState(){
      data =await $http({url:"/three/data"})
    }
    onMounted(()=>{
      getState().then(()=>{
        // console.log(data)
      let myChart =   $echarts.init(document.getElementById("myechartsthree"))
      myChart.setOption({
        legend:{
          top:"top"
        },
       tooltip:{
          show:true
       },
        series:[{
          type:"pie",
          data:data.data.chartData.chartData,
          radius:[30,100],
          center:["50%","50%"],
          roseType:"area",
          itemStyle:{
            borderRadius:1
          }
        }]
      })
      })
    })
    return {
      getState,data
    };
  },
};
</script>

<style>
.chart{
  height: 400px;
}
h2 {
  height: 40px;
  color: #fff;
  line-height: 44px;
  font-size: 0.375rem;
  text-align: center;
}
</style>
